
<!DOCTYPE html public>
<html lang="en">

<head>
    <meta http-equiv="content-type" content="text/html; charset=iso-8859-1">
    <link href="css/styleCoffeemeterGame.css" 
       rel="stylesheet" type="text/css"></img>
    <link rel="shortcut icon" type="image/jpg" href="./favicon.jpg">
  
    <title>Coffeemeter Game: Who Can Drive Fastest and Smoothest?</title> 
</head>


<body>
  

<!-- ############################################## -->
<!-- outer container                                -->
<!-- ############################################## -->

<div id="container">


<!-- ############################################## -->
<!-- header: title image loaded as background image via css -->
<!-- ############################################## -->

<div id="header"> 
  <img class="title" src="figs/title.png"  width="100%"></img>
</div> 


<!-- ############################################## -->
<!-- Buttons                                        -->
<!-- ############################################## -->

<!-- redirects to other scenarios, defines myRedirectX -->
<script src="js/redirect.js" type="text/javascript"></script>

<div id="scenarios">
  <button id="startStopButton" onclick="myRestartStopFunction()"> </button>
</div> 

<div id="mouseMoveDisplay"> Displaytext  </div>

<!-- ############################################## -->
<!-- the actual simulation canvas -->
<!-- ############################################## -->

<!-- ATTENTION! Mouse DOS if not EXPLICIT pixel size of initial --
-- canvas, even if wrong! vw,vh does not work! -->

<div id="contents">
  <canvas id="canvas_coffeeGame" width="700" height="800"
          onmousemove="myMouseMoveHandler(event)"
          onmouseout="myMouseOutHandler()"
          onclick="myClickHandler()"
	  onkeyup="myCheckKeyUpC(event)">
    You are probably using a very ancient web browser (or an Internet Explorer) 
    not supporting html5 canvas. Please switch to another browser for
    running this simulation.
  </canvas>
</div>

<!-- ################################################# -->
<!-- Sliders: global simulation variables              -->
<!-- ################################################# -->

<div id="sliders">
<table  border="0" cellspacing="1" cellpadding="1" >


<tr>
  <td> Skala [m] </td>
  <td> <input id="slider_sizePhys" type="range" min="50" max="500" 
              step="1" value="300"></td>
  <td> <div id="slider_sizePhysVal"></div></td>
</tr>
</div>




</div> <!-- end outer "container" -->


<!-- ########################################################## -->
<!-- specific scripts; position below any simulation elements ! -->
<!-- ########################################################## -->

<script src="js/seedrandom.min.js"></script> <!-- random w seed debug -->

<script src="js/colormanip.js"></script>

<script src="js/models.js"></script> 
<script src="js/vehicle.js"></script>
<script src="js/paths.js"></script>
<script src="js/road.js"></script>

<script src="js/Coffeemeter.js"></script>
<script src="js/Speedometer.js"></script>
<script src="js/EgovehControl.js"></script>
<script src="js/transform3d.js"></script> 
<!-- <script src="../demo_js/transform3d.js"></script> -->

<script src="js/coffeemeterGame_gui.js"></script> 
<script src="js/coffeemeterGame.js"></script> 



</body>
</html>
